<template>
    <div class="View">
        <!-- tab切换菜单 -->
        <el-tabs v-model="activeName" class="bh-tab">
            <!-- <el-tab-pane label="系統情報閱覽" name="first">
            </el-tab-pane> -->
            <el-tab-pane label="系統情報登録" name="second">
            </el-tab-pane>
        </el-tabs>
        <div class="all-content-warrper">
            <!-- 打印 、 编辑、 装置名称那栏目 坑坑坑~~~~~~~~~~ -->
            <div class="title-view">
                <div class="top-btn-view">
                    <!-- <div class="opt-btn" style="margin-left: 0;">印刷</div>
                    <div class="opt-btn">编集</div>
                    <div class="opt-btn">データ</div>
                    <div class="opt-btn">表示</div> -->
                    <div class="bottom">
                        <div class="bottom-left-view">
                            <div class="b-input">
                                <div class="b-input-label">
                                    {{ $t("message.bhView.label.Plant") }}
                                </div>
                                <!-- 装置名称 -->
                                <el-input :value="$store.state.plantName" class="selectInput" readonly></el-input>
                            </div>
                            <div class="b-input">
                                <div class="b-input-label">
                                    系統番号：
                                </div>
                                <!-- macName -->
                                <el-input v-model="handeleRow.codName" clearable
                                    :placeholder="$t('message.bhView.label.placeholder')" class="selectInput"
                                    readonly></el-input>
                                <!-- 机器名称长name -->
                                <el-input v-model="handeleRow.codFlna" clearable
                                    :placeholder="$t('message.bhView.label.placeholder')"
                                    class="selectInput selectInputlong" readonly></el-input>
                            </div>
                        </div>
                        <div class="report" style="margin-left: 15px;display: flex;">
                            <el-button :type="activeFlag == index ? 'primary' : ''" size="mini"
                                v-for="(value, index) in tabs_list" :key="index" @click="handleButtonClick(index)"
                                style="width: auto;height: 24px;line-height: 0;">
                                {{ value.title }}
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="warp">
                <div class="left">
                    <!-- 装置 -->
                    <div class="form-view">
                        <div class="form-row">
                            <div class="form-row-label">
                                {{ $t("message.bhView.leftComponents.device") }}
                            </div>
                            <div class="form-row-right-content">
                                <el-select v-model="valuePlant"
                                    :placeholder="$t('message.bhView.label.placeholderSearch')" class="form-ipt"
                                    @change="changePlantFlg = true, GetSysIntelligenceListApi()">
                                    <el-option v-for="item in plantOptions" :key="item.pltCode" :label="item.pltName"
                                        :value="item.pltCode"></el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>

                    <!-- 机器番号 -->
                    <div class="machine-number-long machine-number" v-show="activeName != 'fourth'">
                        <div class="title">
                            <span>系統番号</span>
                        </div>
                        <div class="machine-number-body" ref="machineRef">
                            <div class="Item" v-for="(Item, index) in drwMgtData" :key="Item.dmgCode"
                                @click="ClickTableRow(Item, index)" :class="index == itemActive ? 'ItemActive' : ''">
                                <div class="ItemID">{{ index + 1 }}</div>
                                <div class="ItemName">
                                    <el-tooltip class="item" effect="dark" :content="Item.codName" placement="top">
                                        <span style="white-space: nowrap;">{{ Item.codName }}</span>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 底部信息 -->
                    <div class="bh-footer">
                        <div class="bh-footer-msg">
                            <span>件数 = {{ drwMgtData.length }} 件</span>
                        </div>
                    </div>
                </div>
                <div class="right" style="width: 100%;">
                    <sysViewInfo :PltCode="this.valuePlantTemp" :Code="handeleRow.code" ref="sysViewInfoRef"
                        :drwMgtDataLength="drwMgtData.length" :leftCodName="handeleRow.leftCodName"
                        :addBtnFlg="addBtnFlg" @chenOldParams="chenOldParams">
                    </sysViewInfo>
                </div>
            </div>
        </div>

        <ViewExportDialog v-if="export_dialog_flag" @CloseExprotDiloag="export_dialog_flag = false" :title="title"
            :PltCode="this.valuePlantTemp" :Code="handeleRow.code">
        </ViewExportDialog>

        <ViewImportDialog v-if="import_dialog_flag" @CloseImportDiloag="import_dialog_flag = false" :title="title"
            :_api="api"></ViewImportDialog>

    </div>
</template>

<script>
import sysViewInfo from "@/components/LineageInformation/sysViewInfo";

import ViewExportDialog from "@/components/Excel/ExportDialog/ViewExportDialog";
import ViewImportDialog from "@/components/Excel/ImportDialog/ViewImportDialog";

import { getPlant, GetSysIntelligenceList } from "@/api/api";
import { GetInitSysIntelligenceFlag } from "@/api/api1";
import $ from "jquery";
import eventBus from "../eventBus/bus";
import { getLocalStorage } from "@/utils/storage";

import { showLoading, hideLoading } from "@/utils/loading";

// 导出模块
export default {
    // 模块名字
    name: "BHView",
    // 注册组件
    components: {
        sysViewInfo,
        // Information,
        // Evaluation,
        // DamageFactor,
        // TopContent
        ViewExportDialog,
        ViewImportDialog
    },
    // 模块数据
    data() {
        //数据
        return {
            tabs_list: [
                { title: "Excel に エクスポート", },
                { title: "Excel から インポート", },
            ],
            activeFlag: 0,
            userData: getLocalStorage('userData'),
            activeName: "second",

            plantOptions: [],
            valuePlant: "",
            valuePlantTemp: "",
            itemActive: 0,
            drwMgtData: [
                {
                    test1: 11,
                },
                {
                    test1: 22,
                }
            ],
            handeleRow: {},
            Code: 0,
            currentNext: 0,


            changePlantFlg: false,

            export_dialog_flag: false,
            import_dialog_flag: false,
            addBtnFlg: false,

        };
    },

    computed: {},


    // 监听指定值，只有指定值变化，才会触发
    watch: {

    },
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        chenOldParams() {
            this.valuePlant = this.valuePlantTemp;
        },
        // 获取装置 1   1000    第一次加载  获取list
        getPlantApi(pageIndex, pageSize, isCreated = false, isName = "") {
            let dataJson = {
                pltCode: 0,
                platName: "",
                pageIndex: pageIndex,
                pageSize: pageSize,
            };
            getPlant(dataJson).then((res) => {
                this.plantOptions = [];
                if (res.data.code != 0) {
                    this.valuePlant = null;
                    this.$store.commit("changePltCode", null);
                    return;
                }
                this.plantOptions = res.data.data;
                //  如果有选择过装置 ---添加为记忆选项

                let filterFlg = this.plantOptions.filter(item => item.pltCode == this.$store.state.pltCode);
                if (this.$store.state.pltCode && isCreated && filterFlg.length > 0) {
                    this.valuePlant = this.$store.state.pltCode;

                } else {
                    if (!this.valuePlant) {
                        this.valuePlant = this.plantOptions[0].pltCode;
                        this.$store.commit("changePltCode", this.valuePlant);
                    }
                }

                this.plantOptions.forEach((Item) => {
                    if (Item.pltCode == this.valuePlant) {
                        this.$store.commit("changePlantName", Item.pltName);
                    }
                });

                this.valuePlantTemp = this.valuePlant;

                this.GetSysIntelligenceListApi(isName);
            });
        },
        async GetInitSysIntelligenceFlagFn() {
            let res = await GetInitSysIntelligenceFlag({ PltCode: this.valuePlant });
            this.addBtnFlg = res.data.data;
        },
        // 获取列表
        async GetSysIntelligenceListApi(isName = "") {
            /**
             *  ****此处特姝，会重新加载此列表函数。
             * 6.   记录一个flg，如果是切换操作，并且isCurrentNext=》flase,出保存弹框。否则执行。原有函数。
             * 6-1。valuePlantTemp临时值，需要往子组件传递，否则切换即通知子组件更新。
             */
            let Fn = async () => {
                this.GetInitSysIntelligenceFlagFn();

                this.valuePlantTemp = this.valuePlant;
                this.drwMgtData = [];
                this.handeleRow = {};
                // this.$store.commit("changePlantName", "");

                this.plantOptions.forEach((Item) => {
                    if (Item.pltCode == this.valuePlant) {
                        this.$store.commit("changePltCode", this.valuePlant);
                        this.$store.commit("changePlantName", Item.pltName);
                    }
                });

                let dataJson = {
                    PltCode: this.valuePlant,
                    MacType: 2
                };
                let res = await GetSysIntelligenceList(dataJson);
                this.drwMgtData = res.data.data;



                var currentIndex = 0;
                if (this.drwMgtData.length > 0) {
                    currentIndex = 0;
                }
                //  有isName则通过保存来的？√
                if (isName) {
                    this.drwMgtData.forEach((item, index) => {
                        if (item.codName == isName) {
                            currentIndex = index;
                        }
                    });
                }

                this.handeleRow = res.data.data[currentIndex];
                this.ClickTableRow(this.handeleRow, currentIndex);
            }
            this.$store.commit("changeIsCurrentFn", Fn);
            if (this.changePlantFlg && !this.$store.state.isCurrentNext) {
                this.changePlantFlg = false;

                this.$refs.sysViewInfoRef.saveFn();
                return
            } else {
                Fn();
            }
        },
        // 选择行
        ClickTableRow(item, index) {
            let Fn = () => {
                console.log(item, index);
                this.itemActive = index;
                this.handeleRow = item;
                this.currentIndex = index;
            }
            /**
             * 2。  记录当前函数。
             */
            this.$store.commit("changeIsCurrentFn", Fn);

            this.isCurrentNenxtFn(Fn);
        },
        isCurrentNenxtFn(Fn) {
            /**
              * 3。  isCurrentNext。true=>往下，正常运行原有函数。
              */
            if (this.$store.state.isCurrentNext) {
                Fn();
            } else {
                /**
                  * 4-1。   记录原来该运行的函数。
                  * 4-2。   执行保存弹出框操作。   
                  */

                this.$refs.sysViewInfoRef.saveFn();
            }
        },

        //Report
        handleButtonClick(index) {
            this.activeFlag = index;
            if (this.drwMgtData.length === 0) {
                this.handeleRow = { code: 0 };
            }

            let Fn = () => {
                if (index === 0) {
                    this.title = "系統情報";
                    this.export_dialog_flag = true;
                } else if (index === 1) {
                    this.title = "系統情報";
                    this.import_dialog_flag = true;
                }
            }
            this.$store.commit("changeIsCurrentFn", Fn);

            this.isCurrentNenxtFn(Fn);

        },

    },
    // 创建完毕状态(里面是操作)
    created() { },
    // 挂载结束状态(里面是操作)
    mounted() {
        this.getPlantApi(1, 1000, true);
        // this.GetSysIntelligenceListApi();

        eventBus.$on('isChangeName', (name) => {
            this.getPlantApi(1, 1000, false, name)
        })

        eventBus.$on('EveSySViewRefreshList', async () => {
            let dataJson = {
                PltCode: this.valuePlant,
                MacType: 2
            };
            let res = await GetSysIntelligenceList(dataJson);
            this.drwMgtData = res.data.data;
        })
    },
    // 销毁前状态(里面是操作)
    beforeDestroy() {
        eventBus.$off('isChangeName')
        eventBus.$off('EveSySViewRefreshList')
    },
};
</script>
<style lang="scss" scoped>
.View {
    width: calc(100% - 192px);
    height: 100%;

    .bs-tabs {
        margin-top: 16px;
    }

    .other-btn {
        background-color: #FFF;
        border-radius: 0 !important;

    }

    .el-button+.el-button {
        margin-left: 0px;
        min-width: 15%;
        width: 15%;
        border-radius: 0 !important;
    }

    .all-content-warrper {
        width: 100%;
        height: calc(100% - 55px);
    }

    .title-view {
        width: calc(100% - 48px);
        background: #f8f8f8;
        border-bottom: 1px solid #e1e1e1;
        margin-left: 24px;

        .top-tab {
            display: flex;
            width: 100%;
            height: 55px;
        }

        .btn-box {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .top-btn-view {
            height: 48px;
            display: flex;
            align-content: center;
            align-items: center;

            // justify-content: space-evenly;
            .opt-btn {
                margin: 0 16px;
                font-size: 14px;
                font-family: HelveticaNeue;
                color: rgba(0, 0, 0, 0.65);
                line-height: 22px;
                cursor: pointer;
            }

            .tab-btn {
                min-width: 60px;
                height: 24px;
                text-align: left;
                line-height: 24px;
                color: rgba(0, 0, 0, 0.65);
                margin-right: 2px;
                border-radius: 2px;
                transition: 0.5s;
            }

            .tab-btn:hover {
                background: rgba(33, 61, 73, 0.05);
            }

            .downBtnActive {
                background: rgba(33, 61, 73, 0.05);
            }
        }

        .bottom {
            // width: 100%;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            // margin-left: 120px;
            .bottom-left-view {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                height: 52px;
            }

            .bottom-right-view {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                height: 52px;

                button {
                    min-width: 52px;
                    height: 24px;
                    border-radius: 4px;
                    border: 1px solid #d3d3d3;
                    margin-left: 16px;
                }

                .bg-bottom-btn {
                    background: #106ebe;
                    color: #ffffff;
                    padding: 0 8px;
                }

                .edit-btn {
                    color: #fff;
                    background: #bc000f;
                    border: 0 none;
                }
            }

            .b-input {
                display: flex;
                align-items: center;
                height: 100%;
                margin-right: 24px;

                .b-input-label {
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.85);
                    height: 24px;
                    line-height: 24px;
                    font-family: HelveticaNeue;
                }

                .selectInput {
                    width: 210px;
                    height: 24px;
                }

                .selectInputlong {
                    width: 384px;
                    margin-left: 8px;

                    ::v-deep .el-input__inner {
                        width: 384px;
                    }
                }

                ::v-deep .el-input__inner {
                    // width: 224px;
                    height: 24px;
                    color: rgba(0, 0, 0, 0.65);
                    background: #f8f8f8;
                }

                ::v-deep .el-input__icon {
                    line-height: 24px;
                }
            }

            .DViewer {
                margin-left: 8px;
                min-width: 52px;
                height: 24px;
                // border-radius: 4px;
                // border: 1px solid #d9d9d9;
                display: flex;
                align-items: center;
                justify-content: center;

                // cursor: pointer;
                .iconfont {
                    height: 24px;
                    line-height: 24px;
                    font-size: 24px;
                    margin: 0 4px;
                    color: #2a7190;
                    cursor: pointer;
                }
            }
        }
    }

    .leftTabel-rightTabel-lineContent {
        width: 100%;
        height: calc(100% - 52px);
        display: flex;
        justify-content: flex-start;

        .left {
            width: 264px;
            height: 100%;
        }

        .right {
            width: calc(100% - 264px);
            padding: 0 16px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .wide-right {
            width: 100%;
            padding: 0 16px 0 24px;
        }
    }
}

.bh-tab {
    width: 100%;

    // height: 100%;
    ::v-deep .el-tabs__header {
        margin: 14px 24px 0 24px;
        width: calc(100% -48px);
    }

    ::v-deep .el-tabs__content {
        height: calc(100% - 55px);
    }

    ::v-deep #pane-first {
        height: 100%;
    }

    ::v-deep #pane-second {
        height: 100%;
    }

    ::v-deep #pane-third {
        height: 100%;
    }
}

.drop-btn {
    background: transparent;
    border: 0 none;
}

::v-deep .el-button.is-disabled,
::v-deep .el-button.is-disabled:hover {
    background: #ebeef5 !important;
    color: #c0c4cc !important;
}

.warp {
    display: flex;
    height: 100%;

    .left {
        min-width: 264px;
        height: 100%;

        .form-view {
            padding: 16px 0px 0px 24px;

            .form-row {
                width: 100%;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 17px;

                .seach {
                    width: 24px;
                    height: 24px;
                    border-radius: 4px;
                    border: 1px solid #d9d9d9;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }

                .form-row-label {
                    color: rgba(0, 0, 0, 0.85);
                    //   font-weight: 500;
                }

                .form-row-right-content {
                    width: 197px;

                    .form-ipt {
                        width: 100%;
                        height: 24px;

                        ::v-deep .el-input__inner {
                            height: 24px;
                            background: #fff;
                        }

                        ::v-deep .el-input__icon {
                            line-height: 24px;
                        }
                    }

                    .ClearBtn {
                        min-width: 66px;
                        height: 24px;
                        border-radius: 4px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #eaeaeb;
                        background: #106ebe;
                        color: #fff;
                        float: right;
                    }
                }
            }

            .form-checkbox {
                padding: 0 0 12px 44px;
            }
        }

        .machine-number {
            width: calc(100% - 24px);
            height: calc(100% - 152px);
            // height: calc(100% - 424px);
            border: 1px solid #c3c3c3;
            margin-left: 24px;
            max-width: 264px;

            .title {
                width: 100%;
                height: 32px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.85);
                background: #e9e9e9;
                display: flex;
                align-items: center;
                justify-content: center;
                border-bottom: 1px solid rgba(195, 195, 195, 0.3);
            }

            .machine-number-body {
                width: 100%;
                height: calc(100% - 32px);
                // overflow: hidden;
                overflow-y: scroll;

                .Item {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    width: 100%;
                    height: 24px;
                    cursor: pointer;
                    border-bottom: 1px solid rgba(195, 195, 195, 0.3);
                    background: #ffffff;
                    transition: 0.5s;

                    .ItemID {
                        width: 31px;
                        min-width: 31px;
                        height: 24px;
                        border-right: 1px solid rgba(195, 195, 195, 0.3);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: rgba(0, 0, 0, 0.85);
                    }

                    .ItemName {
                        padding-left: 24px;
                        height: 100%;
                        color: rgba(0, 0, 0, 0.65);
                        display: flex;
                        align-items: center;
                    }
                }

                .Item:hover {
                    background: rgb(255, 241, 240);
                }

                .ItemActive {
                    background: rgb(255, 241, 240);
                }
            }
        }

        .bh-footer {
            // width: 100%;
            height: 38px;
            background: #e9e9e9;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 24px;
            margin-top: 5px;

            text-align: center;
            // .bh-footer-msg {
            //     // width: 132px;
            //     height: 24px;
            //     line-height: 24px;
            //     padding-left: 8px;
            //     border-radius: 4px;
            //     margin: 0 4px;
            // }
        }
    }

    .right {
        padding-left: 16px;
    }

}
</style>